<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距</title>
        <style type="text/css">
            .outer { border: 1px solid blue ; }
            .inner { border: 1px solid green ; height: 100px ; }
            .first {
                margin-top: 10px ;
                margin-bottom: 20px ;
                margin-left: 30px ;
                margin-right: 15px ;
            }

            .second {
                margin: 10px 15px 20px 30px ; /* 上 右 下 左 */
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="inner first"></div>
        </div>

        <div class="outer">
            <div class="inner second"></div>
        </div>

    </body>
</html>